
<template>
  <div>
    
    <Modal
      v-model="showBox"
      :title="`专利名称：${titleT}`"
      :footer-hide="true"
      :mask-closable="false"
      @on-visible-change="vChange"
      width="1000"
      class-name="vertical-center-modal"
      closable
    >
      <div class="htow" :style="'max-height:'+($app.winHeight-100)+'px;'">
        <div class="paddingLi">
          <div class="relative" v-show="$app.judgeData(data1)">
            <Divider orientation="left" >未缴费信息</Divider>
            <Icon :type="xS1?'md-arrow-dropup-circle':'md-arrow-dropdown-circle'" 
            class="contw cCCC" size="22" @click="xS1=!xS1"/>
          </div>
          <Table :data="data1" :columns="columns1" size="small" stripe border class="marginB10" v-show="$app.judgeData(data1)&&xS1"></Table>
          <div class="relative" v-show="$app.judgeData(data2)">
            <Divider orientation="left" >已缴费信息</Divider>
            <Icon :type="xS2?'md-arrow-dropup-circle':'md-arrow-dropdown-circle'" 
            class="contw cCCC" size="22" @click="xS2=!xS2" />
          </div>
          <Table :data="data2" :columns="columns2" size="small" stripe border class="marginB10" v-show="$app.judgeData(data2)&&xS2"></Table>
          <div class="relative" v-show="$app.judgeData(data3)">
            <Divider orientation="left" >退费信息</Divider>
            <Icon :type="xS3?'md-arrow-dropup-circle':'md-arrow-dropdown-circle'" 
            class="contw cCCC" size="22" @click="xS3=!xS3" />
          </div>
          <Table :data="data3" :columns="columns3" size="small" stripe border class="marginB10" v-show="$app.judgeData(data3)&&xS3"></Table>
          <div class="relative" v-show="$app.judgeData(data4)">
            <Divider orientation="left" >滞纳金信息</Divider>
            <Icon :type="xS4?'md-arrow-dropup-circle':'md-arrow-dropdown-circle'" 
            class="contw cCCC" size="22" @click="xS4=!xS4" />
          </div>
          <Table :data="data4" :columns="columns4" size="small" stripe border class="marginB10" v-show="$app.judgeData(data4)&&xS4"></Table>
        </div>
      </div>

    </Modal>
  </div>
</template>

<style lang="less" scoped>
.htow {
  margin: -16px;
  overflow-y: auto;
  .contw{
    position:absolute;
    right:-3px;
    top:0;
    cursor: pointer;

  }
  td.goOnTxt{height:30px;}
}
</style>

<script>
export default {
  name: "PABox",
  components: {},
  data() {
    let data = {
      columns1: [
        {
          title: "费用种类",
          key: "fee_type",
          className:'goOnTxt',
        },
        {
          title: "应缴金额",
          key: "fee",
          className:'goOnTxt',
        },
        {
          title: "缴费截止日",
          width:130,
          key: "limit_date",
          className:'goOnTxt',
        },
        {
          title: "费用状态",
          key: "",
          width:130,
          className:'goOnTxt',
          render: (h, params) => {

            //判断订单状态，显示不同按钮
            let {
              row: {
                fee_state,
              }
            } = params, out = '';
            out = h("div", { 
              class: "lineH1d5 " +(fee_state == '缴费中'?' cRed':'')
            }, fee_state);
            return out;
          }
        }
      ],
      
      columns2: [
        {
          title: "缴费种类",
          key: "fee_type",
          className:'goOnTxt',
        },
        {
          title: "缴费金额",
          key: "fee",
          className:'goOnTxt',
        },
        {
          title: "缴费日期",
          width:130,
          key: "pay_date",
          className:'goOnTxt',
        },
        {
          title: "缴费人姓名",
          key: "payer_name",
          className:'goOnTxt',
        },
        {
          title: "收据号",
          key: "receipt_number",
          className:'goOnTxt',
        }
      ],

      columns3: [
        {
          title: "退费种类",
          key: "fee_type",
          className:'goOnTxt',
        },
        {
          title: "退费金额",
          key: "fee",
          className:'goOnTxt',
        },
        {
          title: "退费日期",
          width:130,
          key: "pay_date",
          className:'goOnTxt',
        },
        {
          title: "收款人姓名",
          key: "payer_name",
          className:'goOnTxt',
        },
        {
          title: "收据号",
          key: "receipt_number",
          className:'goOnTxt',
        }
      ],
      columns4: [
        {
          title: "缴费时间",
          key: "fee_date",
          className:'goOnTxt',
        },
        {
          title: "当前年费金额",
          key: "year_fee",
          className:'goOnTxt',
        },
        {
          title: "应交滞纳金额",
          width:130,
          key: "late_fee",
          className:'goOnTxt',
        },
        {
          title: "总计",
          key: "total_fee",
          className:'goOnTxt',
        }
      ],

      data1: [],
      data2: [],
      data3: [],
      data4: [],
    };
    let tool = {
      // 弹框是否显示
      showBox: false,
      titleT:'',//标题
      xS1:true,
      xS2:true,
      xS3:true,
      xS4:true
    };
    return Object.assign(data, tool);
  },
  created() {},
  methods: {
    //提交
    goFun() {},
    //弹框消失
    vChange(buEr) {
      if (!buEr) {
        //关闭
        this.xS1=true;
        this.xS2=true;
        this.xS3=true;
        this.xS4=true;
        this.titleT='';
        this.data1=[];
        this.data2=[];
        this.data3=[];
        this.data4=[];
      }
    }
  }
};
</script>
